<template>

  <div class="demo-block">
    <div class="demo-block-control" @click="handleClick()" @mouseover="handleHover" @mouseleave="handleLeave">
      <i :class="iClass"></i>
      <transition name="text-slide">
        <span v-if="labelShow">{{ realLabel }}</span>
      </transition>
    </div>
  </div>

</template>

<script>

export default {
  props: {
    isShow: { type: Boolean, default: true },
    label: { type: String, default: '收起筛选' }
  },
  data() {
    return {
      realLabel: this.label,
      realShow: this.isShow,
      labelShow: false,
      icon: 'el-icon-caret-top',
      iClass: ''
    }
  },
  watch: {
    label(v) {
      this.realLabel = v
    },
    isShow(v) {
      this.realShow = v
    }
  },
  mounted() {
    console.log(this.realShow)
    if (!this.realShow) {
      this.iClass = 'el-icon-caret-bottom hovering'
      this.labelShow = true
      this.realLabel = '展开筛选'
    }
  },
  created() {

  },
  methods: {
    handleClick() {
      this.realShow = !this.realShow
      this.$emit('transSearchParams', this.realShow)
      if (this.realShow) {
        this.realLabel = '收起筛选'
        this.icon = 'el-icon-caret-top'
        this.realShow = false
      } else {
        this.realLabel = '展开筛选'
        this.icon = 'el-icon-caret-bottom'
        this.realShow = true
      }
      this.iClass = this.icon + ' hovering'
    },
    handleHover() {
      this.labelShow = true
      this.iClass = this.icon + ' hovering'
    },
    handleLeave() {
      this.labelShow = false
      this.iClass = this.icon
    }
  }
}
</script>

<style>
  .demo-con {
    height: 300px;
    text-align: center;
    background: #fafafa;
  }
  .demo-block {
    border:1px solid #ebebeb;
    border-radius:3px;
  }
  .demo-block.hover {
    box-shadow:0 0 8px 0 rgba(232,237,250,.6),0 2px 4px 0 rgba(232,237,250,.5)
  }
  .demo-block .demo-block-control {
    border-top:1px solid #eaeefb;
    height:44px;
    box-sizing:border-box;
    background-color:#fff;
    border-bottom-left-radius:4px;
    border-bottom-right-radius:4px;
    text-align:center;
    margin-top:-1px;
    color:#d3dce6;
    cursor:pointer;
    position:relative
  }
  .demo-block .demo-block-control.is-fixed {
    position:fixed;
    bottom:0;
    width:868px
  }
  .demo-block .demo-block-control i {
    font-size:16px;
    line-height:44px;
    transition:.3s
  }
  .demo-block .demo-block-control i.hovering {
    transform:translateX(-40px)
  }
  .demo-block .demo-block-control > span {
    position:absolute;
    transform:translateX(-30px);
    font-size:14px;
    line-height:44px;
    transition:.3s;
    display:inline-block;
  }
  .demo-block .demo-block-control:hover {
    color:#409eff;
    background-color:#f9fafc
  }
  .demo-block .demo-block-control .text-slide-enter,
  .demo-block .demo-block-control .text-slide-leave-active {
    opacity:0;
    transform:translateX(10px)
  }
</style>
